<!--<template>-->
<!--  <router-view />-->
<!--</template>-->

<!--<template>-->
<!--  <el-container class="app-container">-->
<!--    &lt;!&ndash; 左侧导航栏 &ndash;&gt;-->
<!--    <el-aside :width="isCollapse ? '64px' : '200px'" class="app-aside">-->
<!--      <div class="logo"><img style="width: 40px; height: 40px" src="./assets/image/logo.png" />NoteWave</div>-->
<!--      <side-menu />-->
<!--    </el-aside>-->

<!--    &lt;!&ndash; 右侧主区域 &ndash;&gt;-->
<!--    <el-container>-->
<!--      &lt;!&ndash; 顶部导航栏 &ndash;&gt;-->
<!--      <el-header class="app-header">-->
<!--        <header-bar @toggle-collapse="toggleCollapse"/>-->
<!--      </el-header>-->

<!--      &lt;!&ndash; 内容区域 &ndash;&gt;-->
<!--      <el-main class="app-main">-->
<!--        <router-view />-->
<!--      </el-main>-->
<!--    </el-container>-->
<!--  </el-container>-->
<!--</template>-->

<template>
  <div id="app" theme="light">
    <component :is="layoutComponent">
      <router-view />
    </component>

    <div class="ai-chat-button" @click="toggleVisibility" v-if="isLoggedIn">
      <img src="./assets/image/ai.svg" alt="AI Chat" />
    </div>
    <chat-box :isVisible="isVisible" @toggleVisibility="toggleVisibility" />
  </div>
</template>

<script setup lang="ts">
//import HelloWorld from './components/HelloWorld.vue'
import SideMenu from "./components/SideMenu.vue";
import HeaderBar from "./components/HeaderBar.vue";

const isCollapse = ref(false);
const toggleCollapse = () => {
  isCollapse.value = !isCollapse.value;
};

import { reactive, computed,ref ,provide} from "vue";
import { useRoute } from "vue-router";
import MainLayout from "./layouts/MainLayout.vue";
import EmptyLayout from "./layouts/EmptyLayout.vue";
import ChatBox from "./view/home/ChatBox.vue"; // 确保路径正确
const isVisible = ref(false);
const toggleVisibility = () => {
  isVisible.value = !isVisible.value;
}


// 模拟登录状态
const isLoggedIn = ref(false);

provide('isLoggedIn', isLoggedIn);

// 模拟原本在 created 钩子中的代码
// 这里可以从本地存储中获取登录状态
const storedLoginStatus = localStorage.getItem('isLoggedIn');
if (storedLoginStatus === 'true') {
  isLoggedIn.value = true;
}
const route = useRoute();
const layoutComponent = computed(() => {
  if (route.meta.layout) {
    return route.meta.layout === "empty" ? EmptyLayout : MainLayout;
  } else {
    return EmptyLayout;
  }
});

const app = document.getElementById("app");

if (
  window.matchMedia &&
  window.matchMedia("(prefers-color-scheme: dark)").matches
) {
  // 切换到深色主题
  app.setAttribute("theme", "dark");
} else {
  // 切换到浅色主题
  app.setAttribute("theme", "light");
}
</script>

<style scoped>
.bottom-right-image {
  position: fixed;
  bottom: 20px; /* 距离底部的距离 */
  right: 20px; /* 距离右边的距离 */
  z-index: 1000; /* 确保它在其他内容之上 */
}

.ai-chat-button {
  position: fixed;
  right: 80px;
  bottom: 20px;
  /* background-color: lightgreen; */
  background-color: #007bff;
  color: white;
  /* padding: 2px 2px; */
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); */
}
.ai-chat-button img {
  width: 40px;
  height: 40px;
  /* margin-right: 8px; */
}

[theme="light"] {
  --bg: #f2f2f2;
}
[theme="dark"] {
  --bg: #000;
}
#app {
  background: var(--bg);
}

/*
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}

.app-container {
  height: 100vh;
}
.app-aside {
  background-color: #262626;
  color: white;
  transition: width 0.3s;
}
.app-header {
  background-color: #fff;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  display: flex;
  align-items: center;
}
.app-main {
  background-color: #f0f2f5;
  padding: 20px;
}
.logo {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}*/
/* 防止布局切换时的闪烁 */
[data-layout] {
  display: contents;
}
</style>
